<template>
  <view>
    <view class="content">
      <view class="tabs">
        <view
          :class="['text', active == i ? 'active' : '']"
          v-for="(item, i) in tablis"
          :key="i"
          @click="select(i)"
          >{{ item.tetx }}</view
        >
      </view>
      <view class="lists">
        <view
          class="row"
          @click="jumpDeatil(item.order_sn)"
          v-for="(item, i) in list"
          :key="i"
        >
          <image class="img" :src="item.image" mode="" />
          <view class="rig">
            <view class="top">
              <text>{{ item.name }}</text>
              <text>¥{{ item.order_amount }}</text>
            </view>
            <view class="bot">
              <view class="btn can" v-if="item.order_state == 0">已取消</view>
              <view class="btn bg" v-if="item.order_state == 10">去付款</view>
              <view class="btn bg" v-if="item.order_state == 20">已付款</view>
              <view class="btn" v-if="item.order_state == 30">已发货</view>
              <view
                class="btn"
                v-if="item.order_state == 30"
                @click.stop="Viewlog(item.order_sn)"
                >查看物流</view
              >
              <view class="btn bg" v-if="item.order_state == 30">确认收货</view>
              <view
                class="btn bg"
                v-if="item.order_state == 40 && item.evaluation_state == 0"
                >待评价</view
              >
              <view
                class="btn"
                v-if="
                  item.order_state == 40 &&
                  (item.evaluation_state == 1 || item.evaluation_state == 2)
                "
                >已完成</view
              >
              <view
                class="btn bg"
                v-if="item.order_state == 50"
                @click.stop="refundDetail(item.order_sn)"
                >申请退款</view
              >
              <view class="btn" v-if="item.order_state == 60">已退款</view>
              <view class="btn" v-if="item.order_state == 70">拒绝退款</view>
            </view>
          </view>
        </view>
        <view class="noData" v-if="noDat">
          <image
            class="img"
            src="https://www.123qifu.com/onlineimages/static/Shopping/nodata.png"
            mode=""
          />
          <text>您还没有相关订单~</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      noDat: false,
      active: 0,
      status: "",
      tablis: [
        {
          id: 0,
          tetx: "全部",
        },
        {
          id: 1,
          tetx: "待付款",
        },
        {
          id: 2,
          tetx: "待收货",
        },
        {
          id: 3,
          tetx: "待评价",
        },
        {
          id: 4,
          tetx: "退款/售后",
        },
      ],
      page: 1, // 页码
      pageSize: 10, // 每页条数
      list: [],
      total: "",
      last_page: "",
      toView: "",
      actives: 2, // 支付方式
      orderCode: "", //订单编号
      payment: "wx", // 支付方式
      payPassword: "", // 支付密码
      isCommission: "0", // 非必传,默认为0,是否为佣金支付:0=否,1=是
    };
  },
  onLoad(parmas) {
    this.active = Number(parmas.type);
    if (this.active) {
      this.select(this.active);
    }
  },
  onShow() {
    this.getMyOrder();
  },
  onReachBottom() {
    if (this.total / 10 <= this.last_page && this.total > 10) {
      this.loadMore();
    }
  },
  methods: {
    // table切换
    select(i) {
      this.page = 1;
      this.active = i;
      switch (i) {
        case 0:
          this.status = "";
          this.getMyOrder();
          break;
        case 1:
          this.status = "10";
          this.getMyOrder();
          break;
        case 2:
          this.status = "20,30";
          this.getMyOrder();
          break;
        case 3:
          this.status = "40";
          this.getMyOrder();
          break;
        case 4:
          this.status = "50";
          this.getMyOrder();
          break;
      }
    },
    // 订单详情
    jumpDeatil(id) {
      uni.navigateTo({
        url: "../../../orderPackages/pages/Myorder/orderDetail?order_sn=" + id,
      });
    },
    // 获取订单列表
    async getMyOrder() {
      this.page = 1;
      const res = await this.$myRequest({
        url: "order/getMyOrder",
        method: "POST",
        data: {
          page: this.page, // 页码
          pageSize: this.pageSize, // 每页条数
          status: this.status,
        },
      });
      this.list = res.data.data.data;
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
      if (this.list.length == 0) {
        this.noDat = true;
      } else {
        this.noDat = false;
      }
    },
    // 获取订单下一页列表
    async loadMore() {
      const res = await this.$myRequest({
        url: "order/getMyOrder",
        method: "POST",
        data: {
          page: (this.page += 1), // 页码
          pageSize: this.pageSize, // 每页条数
          status: this.status,
        },
      });
      this.list = this.list.concat(res.data.data.data);
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    // 退款详情
    refundDetail(id) {
      uni.navigateTo({
        url: "../../../orderPackages/pages/Myorder/Refundetails?order_sn=" + id,
      });
    },
    // 查看物流
    Viewlog(id) {
      uni.navigateTo({
        url: "../../../orderPackages/pages/Myorder/ViewLogistics?order_sn=" + id,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.content {
  overflow: hidden;
  .tabs {
    width: 100%;
    height: 100rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30rpx;
    .text {
      font-size: 30rpx;
      font-weight: 400;
      color: #999999;
      &.active {
        font-weight: 400;
        color: #333333;
        position: relative;
      }
      &.active::after {
        position: absolute;
        content: "";
        width: 50rpx;
        height: 6rpx;
        border-radius: 40rpx;
        background: #c52b2e;
        bottom: -28rpx;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .lists {
    margin-top: 20rpx;
    .row {
      width: 100%;
      height: 240rpx;
      margin-bottom: 20rpx;
      background: #fff;
      box-sizing: border-box;
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      .img {
        display: block;
        width: 180rpx;
        height: 180rpx;
        border-radius: 4px;
        margin-right: 25rpx;
      }
      .rig {
        // flex: 1;
        width: 70%;
        position: relative;
        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          text:nth-child(1) {
            width: 70%;
            font-size: 28rpx;
            color: #333333;
            font-weight: bold;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }
          text:nth-child(2) {
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
          }
        }
        .cen {
          font-size: 26rpx;
          color: #999999;
          margin-top: 10rpx;
        }
        .bot {
          position: absolute;
          right: 0;
          left: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .btn {
            display: block;
            width: 110rpx;
            height: 35rpx;
            text-align: center;
            line-height: 35rpx;
            font-size: 22rpx;
            color: #c52b2e;
            border-radius: 40rpx;
            border: 1px solid #c52b2e;
            margin-left: 20rpx;
            &.bg {
              background: #c52b2e;
              color: #fff;
            }
            &.can {
              background: #fff;
              color: #c52b2e;
            }
          }
        }
      }
    }
    .noData {
      width: 100%;
      min-height: calc(100vh - 210rpx);
      background: #fff;
      overflow: hidden;
      .img {
        display: block;
        width: 348rpx;
        height: 190rpx;
        margin: 314rpx auto 30rpx;
      }
      text {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 30rpx;
        font-weight: 400;
        color: #999999;
        letter-spacing: 2rpx;
      }
    }
  }
}
</style>
